<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="启动页" name="7">
        <boot-manage v-if="isBoot"></boot-manage>
      </el-tab-pane>
      <el-tab-pane label="开屏广告" name="1">

      </el-tab-pane>
      <el-tab-pane label="首页轮播" name="2">
      </el-tab-pane>
      <el-tab-pane label="首页弹窗" name="3">
      </el-tab-pane>
      <el-tab-pane label="漂浮广告" name="4">
      </el-tab-pane>
      <el-tab-pane label="个人中心" name="5">
      </el-tab-pane>
      <el-tab-pane label="会员任务页" name="6"></el-tab-pane>
      <other-manage :active-index="activeName" v-if="isOpen && activeName != '7'"></other-manage>
    </el-tabs>
  </div>
</template>
<script>
  import BootManage from './components/bootManage';
  import OtherManage from './components/otherManage';
  export default {
    name: 'AdvertManage',
    components: {
      BootManage,
      OtherManage
    },
    data() {
      return {
        // 选项卡默认选中
        activeName: '7',
        isBoot: true,
        isOpen: false
      }
    },
    methods: {
      handleClick(tab, event) {
        this.activeName = tab.name;
        if (tab.name === '7') {
          this.isBoot = true;
          this.isOpen = false;
        } else {
          this.isBoot = false;
          this.isOpen = true;
        }
        console.log(tab, event);
      }
    }
  }
</script>
